<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-01-18 20:14:18
 * @LastEditTime: 2022-05-10 15:48:31
-->
<template>
  <!-- <div>
    <dt-modal-info ref="info" title="线索渠道管理" :width="1000" @close="closeFun">
      <div class="flex flex-horizontal-between" style="margin-bottom:20px;">
        <p class="tips">
          <Icon type="md-information-circle" />
          <span>关联线索渠道后，您可以在“案场线索”中，查看由对应渠道所推送的线索客户</span>
        </p>
        <Button type="primary" @click="newRelation">新增关联</Button>
      </div>
      <dt-grid ref="table" :onFetch='onFetch' :heightResize="true" />
    </dt-modal-info>
 
    <dt-modal-edit ref="edit" title="新增线索渠道" @ok="onOk">
      <p class="tips" style="margin-bottom:20px;">
        <Icon type="md-information-circle" />
        <span>请选择“线索渠道”及您案场中已创建的“案场渠道”进行关联</span>
      </p>
      <dt-info :options="options" ref="relationInfo" :info="relationInfo"></dt-info>
    </dt-modal-edit>
  </div> -->
  <div>
    <dt-modal-info ref="info" title="合并渠道" :width="1000" @close="closeFun">
      <div class="flex flex-horizontal-between" style="margin-bottom:20px;">
        <p class="tips">
          <Icon type="md-information-circle" />
          <span>当渠道合并入官方渠道后，被合并的渠道数据会被计入官方渠道</span>
        </p>
        <!-- <Button type="primary" @click="newRelation">新增关联</Button> -->
      </div>
      <dt-grid ref="table" :onFetch='onFetch' :heightResize="true" />
    </dt-modal-info>

    <!-- <dt-modal-edit ref="edit" title="新增线索渠道" @ok="onOk">
      <p class="tips" style="margin-bottom:20px;">
        <Icon type="md-information-circle" />
        <span>请选择“线索渠道”及您案场中已创建的“案场渠道”进行关联</span>
      </p>
      <dt-info :options="options" ref="relationInfo" :info="relationInfo"></dt-info>
    </dt-modal-edit> -->


    <!-- <dt-modal-edit ref="edit1" title="合并渠道管理" @ok="onOk" @cancelData="modalCancel"> -->
    <Modal v-model="mergeFlag" title="合并渠道管理" width='800' :closable='false'>
      <div class="currentChannel">
        <span>官方渠道：{{relationChanneldata.baseChannelName}}</span>
        <span>当前已选{{chooseLen?chooseLen:0}}个渠道</span>
      </div>
      <div class="channelText">请在下方列表选择所要合入的渠道</div>
      <div class="channelBox">
        <CheckboxGroup v-model="channelList" @on-change='channelGround'
          style=" display: flex;flex-direction: column;">
          <Checkbox :label="item.channelId"
            v-for="(item,index) in relationChanneldata.clueChannelList" :key="index"
            :disabled='item.relationClueChannel?true:false'>
            {{item.channelName}}</Checkbox>
        </CheckboxGroup>
      </div>
      <div slot="footer">
        <Button type="text" @click="mergeCancel">取消</Button>
        <Button type="primary" @click="mergeSure">确定</Button>
      </div>
    </Modal>



  </div>
</template>
<script>
  import channelColumn from './channelColumn'
  import relationOpt from './relation'
  import channelMgr from '@/biz/channel/channel'
  export default {
    data() {
      return {
        channelList: [],
        relationInfo: {
          clueChannelId: '',
          buildingChannelId: '',
          channelIds: []
        },
        options: [],
        mergeFlag: false,
        relationChanneldata: [],
        chooseLen: 0,
      }
    },
    methods: {
      // 已/未合并渠道列表
      cancelRelation(val) {
        this.mergeFlag = true
        let params = {
          baseChannelId: val.buildingChannelId,
          buildingId: this.$dt.buildInfo().housesId
        }
        channelMgr
          .selectBaseChannelMergeList(params)
          .then((res) => {
            this.relationChanneldata = res
          })

      },
      mergeCancel() {
        if (this.channelList.length < 1) {
          this.mergeFlag = false
        } else {
          this.$Modal.confirm({
            title: '提示',
            content: '<p> 是否放弃编辑内容？</p>',
            okText: '确定',
            // cancelText: '取消',
            onOk: () => {
              this.mergeFlag = false
              this.channelList = []
              this.chooseLen = 0

            },
          })
        }


      },
      mergeSure() {
        if (this.channelList.length < 1) {
          this.$Message.warning('请选择要合并的渠道')
          return false;
        }


        this.$Modal.confirm({
          title: '提示',
          content: '<p>渠道合并后将无法撤销，确认是否要合并？</p>',
          okText: '确定',
          // cancelText: '取消',
          onOk: () => {
            let params = {
              baseChannelId: this.relationChanneldata.baseChannelId,
              buildingId: this.$dt.buildInfo().housesId,
              relationChannelIds: this.channelList,
            }
            channelMgr
              .mergeChannel(params)
              .then((res) => {
                this.mergeFlag = false
                this.channelList = []
                this.chooseLen = 0

                setTimeout(() => {
                  this.$Modal.success({
                    title: '渠道合并',
                    content: '正在合并中，请稍后查看数据及新建客户'
                  });
                }, 500)


              })
          },
        })


      },
      channelGround(val) {
        if (val) {
          this.chooseLen = val.length
        }

      },
      show() {
        this.$refs.info.show()
        this.$refs.table.init(this, new channelColumn(this))
        this.$refs.table.fetch()
      },
      onFetch() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId
        }

        return channelMgr
          .getClueChannelRelationList(params)
          .then((res) => {
            return res
          })
      },
      newRelation() {

        this.relationInfo = {
          clueChannelId: '',
          buildingChannelId: '',
          channelIds: []
        }
        let params = {
          buildingId: this.$dt.buildInfo().housesId
        }
        Promise.all([channelMgr.getClueRelationList(params)])
          .then(() => {
            this.options = relationOpt.options(this)
            this.$refs.edit.show()
          })
      },
      closeFun() {
        this.$emit('onSearch')
      },
      onOk() {
        this.$refs.relationInfo.validate().then((res) => {
          if (res) {
            let params = {
              clueChannelId: this.relationInfo.clueChannelId,
              buildingChannelId: this.relationInfo.channelIds[1],
              buildingId: this.$dt.buildInfo().housesId
            }
            channelMgr
              .addClueRelation(params)
              .then((res) => {
                this.$refs.edit.hide()
                this.$refs.table.fetch()
              })
          } else {
            console.warn('dt-model-edit', this.info)
          }
        })
      },

    }
  }
</script>
<style scoped lang="scss">
  .tips {
    margin-right: 20px;
    padding: 5px 10px;
    font-size: 14px;
    background: #FEFCEE;
    border-radius: 5px;

    .ivu-icon {
      margin-right: 10px;
      color: #2298ff;
      font-size: 18px;
    }

    .link-btn {
      margin-left: 10px;
      cursor: pointer;
      color: #2298ff;
    }
  }

  .currentChannel {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .channelBox {
    max-height: 200px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 10px;
    border: 1px #eee solid;
  }

  .channelText {
    margin-top: 10px;
    color: #999;
    text-align: center;
  }

  .footer {
    text-align: center;

    button {
      margin: 0 10px;
    }
  }
</style>